<!-- components/ComponentDoc/index.vue -->
<template>
  <div class="component-doc">
    <!-- 组件标题和描述 -->
    <div class="component-doc__header">
      <h1>{{ title }}</h1>
      <p class="description">{{ description }}</p>
    </div>

    <!-- 组件演示区域 -->
    <div class="demo-container">
      <h2>代码演示</h2>
      
      <!-- 可以有多个示例 -->
      <el-row :gutter="20">
        <el-col :span="12" v-for="(demo, index) in demos" :key="index">
          <div class="demo-item">
            <div class="demo-item__title">{{ demo.title }}</div>
            <div class="demo-item__desc">{{ demo.description }}</div>
            
            <el-card class="demo-item__content" shadow="hover">
              <!-- 示例展示区域 -->
              <div class="demo-item__preview">
                <slot :name="`demo-${index}`"></slot>
              </div>
              
              <!-- 代码展示区域 -->
              <div class="demo-item__meta" v-show="demo.showCode">
                <div class="demo-item__code">
                  <pre><code class="language-vue" v-html="highlightCode(demo.code)"></code></pre>
                  <el-button 
                    size="small" 
                    class="demo-item__copy"
                    @click="copyCode(demo.code)"
                  >复制代码</el-button>
                </div>
              </div>
              
              <!-- 控制代码显示/隐藏 -->
              <div 
                class="demo-item__control"
                @click="demo.showCode = !demo.showCode"
              >
                <i :class="['el-icon-caret-' + (demo.showCode ? 'top' : 'bottom')]"></i>
                <span>{{ demo.showCode ? '隐藏代码' : '显示代码' }}</span>
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- API 文档区域 -->
    <div class="api-container">
      <h2>API</h2>
      <div class="markdown-content" v-html="parsedDoc"></div>
    </div>
  </div>
</template>

<script>
import { marked } from 'marked';
import ClipboardJS from 'clipboard';
import hljs from 'highlight.js/lib/core';
import xml from 'highlight.js/lib/languages/xml';  // 用于 HTML/Vue 模板
import javascript from 'highlight.js/lib/languages/javascript';  // 用于 JavaScript
import 'highlight.js/styles/github.css';

// 注册语言
hljs.registerLanguage('xml', xml);
hljs.registerLanguage('javascript', javascript);
// 将 vue 语言映射到 xml 解析器
hljs.registerAliases('vue', { languageName: 'xml' });

export default {
  name: 'ComponentDoc',
  props: {
    title: {
      type: String,
      required: true
    },
    description: {
      type: String,
      default: ''
    },
    doc: {
       type: String,
      default: ''
    },
    demos: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    parsedDoc() {
      if (!this.doc) return '';
      marked.setOptions({
        highlight: (code, lang) => {
          if (lang && hljs.getLanguage(lang)) {
            return hljs.highlight(lang, code).value;
          }
          return hljs.highlightAuto(code).value;
        }
      });
      return marked(this.doc);
    }
  },
  methods: {
    highlightCode(code) {
      try {
        return hljs.highlight(code, { language: 'vue' }).value;
      } catch (error) {
        console.error('代码高亮失败:', error);
        return code; // 降级处理，返回原始代码
      }
    },
    copyCode(code) {
      const clipboard = new ClipboardJS('.demo-item__copy', {
        text: () => code
      });
      
      clipboard.on('success', () => {
        this.$message.success('代码复制成功');
        clipboard.destroy();
      });
      
      clipboard.on('error', () => {
        this.$message.error('代码复制失败');
        clipboard.destroy();
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.component-doc {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;

  &__header {
    margin-bottom: 40px;

    h1 {
      font-size: 30px;
      font-weight: 500;
      margin: 0 0 16px;
    }

    .description {
      font-size: 14px;
      color: #666;
      margin: 0;
    }
  }

  h2 {
    font-size: 24px;
    font-weight: 500;
    margin: 40px 0 20px;
    color: #1f2f3d;
  }

  .demo-container {
    margin-bottom: 50px;
  }

  .demo-item {
    margin-bottom: 24px;

    &__title {
      font-weight: 500;
      font-size: 16px;
      margin-bottom: 8px;
      color: #1f2f3d;
    }

    &__desc {
      font-size: 14px;
      color: #666;
      margin-bottom: 16px;
    }

    &__content {
      position: relative;
      border-radius: 4px;
    }

    &__preview {
      padding: 24px;
    }

    &__meta {
      background-color: #fafafa;
      border-top: 1px solid #eaeefb;
    }

    &__code {
      position: relative;
      padding: 16px;

      pre {
        margin: 0;
        padding: 0;
        
        code {
          font-family: Consolas, Monaco, 'Andale Mono', monospace;
          font-size: 14px;
          line-height: 1.5;
          padding: 0;
        }
      }
    }

    &__copy {
      position: absolute;
      right: 8px;
      top: 8px;
      opacity: 0;
      transition: opacity .3s;
    }

    &__code:hover &__copy {
      opacity: 1;
    }

    &__control {
      border-top: 1px solid #eaeefb;
      height: 44px;
      box-sizing: border-box;
      background-color: #fff;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      text-align: center;
      margin-top: -1px;
      color: #d3dce6;
      cursor: pointer;
      position: relative;
      transition: .2s;
      display: flex;
      align-items: center;
      justify-content: center;

      &:hover {
        color: #409EFF;
      }

      i {
        margin-right: 5px;
      }
    }
  }

  .api-container {
    background-color: #fff;
    padding: 24px;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);

    table {
      width: 100%;
      border-collapse: collapse;
      margin: 16px 0;

      th, td {
        text-align: left;
        padding: 12px 8px;
        border-bottom: 1px solid #ebeef5;
      }

      th {
        font-weight: 500;
        color: #1f2f3d;
        white-space: nowrap;
      }

      td {
        color: #606266;
      }
    }
  }

  .markdown-content {
    font-size: 14px;
    line-height: 1.8;
    color: #3f536e;

    h1, h2, h3, h4, h5, h6 {
      margin: 16px 0;
      font-weight: 500;
    }

    p {
      margin: 12px 0;
    }

    code {
      background-color: #f5f7fa;
      padding: 2px 6px;
      border-radius: 3px;
      font-family: Consolas, Monaco, 'Andale Mono', monospace;
    }
  }
}
</style> 